<template>
  <div class="floor flex">
    <div class="avatar-container shrink-0">
      <el-avatar :src="item.author.avatar" :size="40" />
    </div>
    <div class="con m-l-16 flex-1">
      <div class="flex align-items-center">
        <router-link :to="`/users/${item.author.id}`" class="title link" target="_blank">
          {{ item.author.nickname }}
        </router-link>
        <operate-timeago :item="item" class="m-l-16" />
        <span
          v-if="item.author.id === curUser.id && !editing"
          class="m-l-auto link el-link--primary m-r-16"
          @click="editing = true"
        >编辑</span>
      </div>
      <content-show-edit
        :item="item"
        :editing.sync="editing"
        @updated="handleUpdated"
        style="position: relative; z-index: 1;"
      />
      <div v-if="!editing" class="flex align-items-center" style="position: relative; z-index: 2;">
        <vote-like :comment="item" @voted="handleUpdated" />
        <vote-dislike :comment="item" @voted="handleUpdated" />
        <span class="m-l-30 info pointer" @click="replyComment">评论</span>
      </div>
      <comments-list
        ref="commentsList"
        :cur-comment="item"
        style="position: relative; z-index: 3;"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import VoteLike from '@/components/issues-answers/answers/vote-like';
import VoteDislike from '@/components/issues-answers/answers/vote-dislike';
import ContentShowEdit from '@/components/issues-answers/answers/content-show-edit';
import OperateTimeago from './operate-timeago';
import CommentsList from '../sub-comments/comments-list';

export default {
  name: 'comments-list-item', // 跟帖楼层
  components: {
    VoteLike,
    VoteDislike,
    ContentShowEdit,
    OperateTimeago,
    CommentsList,
  },
  props: {
    comment: Object,
  },
  data() {
    return {
      item: this.comment,
      editing: false,
    };
  },
  computed: {
    ...mapState({ curUser: 'currentUser' }),
  },
  methods: {
    handleUpdated(item) { Object.assign(this.item, item); },
    replyComment() { this.$refs.commentsList.handleReplyComment(); },
  },
};
</script>

<style lang="scss">
.floor {
  >.avatar-container {
    margin-top: 1.5rem;
    margin-left: .75rem;
  }

  >.con {
    position: relative;
    overflow: hidden;
    border-top: 1px solid #e5e5e5;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    min-width: 0;
  }
}
.floor:last-child>.con { border-bottom: 1px solid #e5e5e5; }

.sub-floors { min-height: 3rem; }
</style>
